﻿@page "/gallery/inputs"
@using MyApp.Client.Pages.gallery.Inputs

<Breadcrumbs>
    <Breadcrumb href="/gallery">
        gallery
    </Breadcrumb>
    <Breadcrumb>
        Form Input Examples
    </Breadcrumb>
</Breadcrumbs>

<ApiReference Component="TextInput<TValue>">
    Bookings Form
</ApiReference>

<p class="mb-4 text-lg">
    The <code>TextInput</code>, <code>SelectInput</code>, <code>DateTimeInput</code> and <code>TextAreaInput</code> contains the most popular
    Input controls used by C# POCOs which can be bound directly to Request DTOs and includes support for
    <a class="text-blue-600 hover:text-blue-800" href="https://docs.servicestack.net/declarative-validation">declarative</a>
    and
    <a class="text-blue-600 hover:text-blue-800" href="https://docs.servicestack.net/validation">Fluent Validation</a>
    binding.
</p>

<BookingsForm class="max-w-screen-md" />

<ExampleCode Path="/gallery/Inputs/BookingsForm.razor" />

<ApiReference Component="Autocomplete<T>">
    Autocomplete
</ApiReference>

<p class="mb-4 text-lg">
    The <code>Autocomplete</code> component provides a user friendly Input for being able to search and quickly select items
    with support for partial items view and infinite scrolling.
</p>

<AutocompleteExamples class="max-w-prose" />

<ExampleCode Path="/gallery/Inputs/AutocompleteExamples.razor" />

<ApiReference Component="TagInput">
    TagInput
</ApiReference>

<p class="mb-4 text-lg">
    The <code>TagInput</code> component provides a user friendly control for managing a free-form <code>List&lt;string&gt;</code> tags or symbols
    which is also supported in declarative Auto Forms using the <code>[Input(Type="tag")]</code> attribute:
</p>

<TagInputExamples class="max-w-screen-md" />

<ExampleCode Path="/gallery/Inputs/TagInputExamples.razor" />

<p class="mb-4 text-lg">
    Which uses the <code>UpdateContact</code> DTO below to render the AutoEditForm and perform the API Update:
</p>

<ExampleCode Title="UpdateContact Model" SourceCode=@AutoQueryGrids.ContactsMeta.UpdateContactSrc Language="csharp" />
